<template>
  <div>
    <!-- 查询 -->
    <el-form :inline="true" label-width="120px" class="demo-form-inline cc">
      <el-form-item label="订单编号">
        <el-input v-model="dingdan" placeholder="输入订单编号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
      </el-form-item>
      <el-form-item label="订单成立时间">
        <el-date-picker
          v-model="value1"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
        <el-button type="primary" @click="zh">查询</el-button>
      </el-form-item>
    </el-form>

    <!--  -->
    <template>
      <el-table :data="huizong" border style="width: 100%">
        <el-table-column prop="u.uname" label="用户" width="180">
        </el-table-column>
        <el-table-column prop="s.title" label="商品" width="180">
        </el-table-column>

        <el-table-column label="总额" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px" v-if="scope.row.s">{{
              scope.row.s.price
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="物流渠道" width="180">
          <template slot-scope="scope">
            <span v-show="scope.row.w.expressage == 0" style="margin-left: 10px"
              >中通</span
            >
            <span v-show="scope.row.w.expressage == 1" style="margin-left: 10px"
              >圆通</span
            >
          </template>
        </el-table-column>

        <!-- <el-table-column prop="w.expressage" label="物流渠道"> </el-table-column> -->
        <el-table-column prop="orderNo" label="订单编号"> </el-table-column>
      </el-table>
    </template>
  </div>
</template>

<script>
export default {
  data() {
    return {
      first: true,
      price: "",
      huizong: [],
      splist: [],
      userList: [],
      loglist: [],
      sizeForm: {},
      activeIndex: "1",
      activeIndex2: "1",
      dingdan: "",
      value1: "",
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      // console.log(key, keyPath);
    },
    zh() {
      for (let i = 0; i < this.userList.length; i++) {
        this.huizong.push({
          u: this.userList[i],
          s: this.splist[i],
          w: this.loglist[i],
        });
      }
      // console.log(this.huizong, "@2");
    },
    initData() {
      let p = new Promise((resolve, reject) => {
        let allCount = 0;
        let count = 0;
        this.$http.logistics.login().then((res) => {
          // console.log(res)
          this.loglist = res.data.data;
          // console.log(this.loglist)
          this.loglist.forEach((i, index) => {
            this.$http.userApi.queryById({ uid: i.uid }).then((res) => {
              this.userList[index] = res.data.data;
              if (count == this.loglist.length - 1) {
                resolve("ok");
              }
              count++;
            });
            // console.log('i.pid', i.pid)
            this.$http.commidityApi
              .queryById({ pid: i.pid })
              .then((res) => (this.splist[index] = res.data.data));
          });
          // console.log(this.userList, '@@@')
        });
      });
      p.then((r) => {
        if (this.first) {
          this.first = false;
          this.zh();
        }
      });
    },
    search() {
      this.huizong.forEach((item) => {
        if (item.w.odd == this.dingdan) {
          this.huizong = [];
          this.huizong.push(item)
        }
      });
      
      console.log(this.huizong);
    },
  },
  mounted() {
    this.initData();
  },
};
</script>

<style lang="scss" scoped>
button {
  background: #010101 !important;
  border-color: #010101 !important;
  color: #fff;
}
</style>
